<template>
  <div class="dazi-page">
    <div class="contentList">
      <div v-for="(item, index) in tang300.getParagraphs().paragraphs.join('')" :key="index" class="contentItem">
        <div class="pinyin">{{ pinyin(item) }}</div>
        <div class="hanzi"
          :class="{ success: item === tang300.inputContent[index], error: tang300.inputContent[index] && item !== tang300.inputContent[index] }">
          {{ item }}
        </div>
      </div>
    </div>
    <rightConfig class="rightConfig"></rightConfig>
  </div>
</template>

<script setup>
import { pinyin } from "pinyin-pro";
import rightConfig from "../components/rightConfig.vue";

import { useTang300Store } from "../store";
let tang300 = useTang300Store();
</script>

<style lang="less" scoped>
.dazi-page {
  display: flex;

  .contentList {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; //排列格式
    height: 100%;
    overflow-y: auto;

    .contentItem {
      margin: 10px;

      .pinyin {
        font-size: 30px;
        // text-transform: lowercase;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
      }

      .hanzi {
        font-size: 30px;
        background: #3f3e3e;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-variant-east-asian: simplified;

        &.success {
          background-color: var(--color-success-light-1);
        }

        &.error {
          background-color: var(--color-danger-light-1);

        }
      }
    }
  }
}
</style>